<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link href="../css/mui.min.css" rel="stylesheet" />
  <link href="../css/mui.picker.css" rel="stylesheet" />
  <link href="../css/mui.poppicker.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="../css/timecheck.css" />
  <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';
  </script>
  <style>
    .mui-content{
      border-top: 1px solid transparent;
    }
    .actDetailsBox{
      width: 100%;
      background-color: white;
    }
    .actDetailsBox>div{
      padding: 0.1rem 0.1rem 0.05rem 0.3rem;
      border-bottom: 1px solid #ccc;
      overflow: hidden;
    }
    .actDetailsBox p{
      margin-bottom: 0.02rem;
      color:black;
      font-size: 0.22rem;
    }

    .actName{
      height: 0.6rem;
      width: 90%;
      margin: 0.2rem auto 0;
      line-height: 0.6rem;
      border-radius: 0.3rem;
      text-align: center;
      background-color: #BAEA85;
      color:white;
      border: 1px black  dotted;
    }
    .storeChoose{
      width:100%;
      font-size: 0.22rem;
      text-align: center;
      overflow: hidden;
      padding: 0.25rem 3%;
      /*background-color:#F7F7F7;*/
      overflow: hidden;
    }
    .storeChoose span{
      display: inline-block;
      width: 33%;
      padding: 0.06rem 0;
      float: left;
      border: 1px solid #ccc;
      font-size: 0.2rem;
      background-color:white;
    }
    .storeChoose span:nth-child(2){
      border-right: none;
      border-left: none;
    }
    .storeChoose .default{
      background-color: #ccc;
    }

    table {
      font-size: 0.22rem;
      width: 100%;
      text-align: center;
      margin-top: 0.1rem;
      background-color:#E6E6E6;
    }
    table tr td {
      height: 0.8rem;
      display: inline-block;
      line-height: 0.8rem;

    }
    table,tbody,td div{
      text-align: center;
      font-size: 0.2rem;
    }
    td span{
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    .table-box{
      width: 100%;
      font-size: 0.2rem;
      text-align: center;
      padding-bottom: 1rem;
    }
    .tab-head {
      width: 100%;
      background-color: #FFFFFF;
      line-height: 0.5rem;
    }

    .light {
      color: #8e8a8a;
    }
    .bglight {
      background-color: #FFFFFF;
    }


    .dataHeader {
      width: 100%;
      background-color: white;
      padding: 0.2rem 0;
      overflow: hidden;
    }
    .setMeal ,.openCard{
      background-color: #F9F9F9;
      width: 48%;
      float: left;
      border-radius: 0.2rem;
      text-align: center;
      padding: 0.05rem 0 0.1rem;
    }
    .setMeal{
      margin:0 2% 0 1%;
    }
    .setMeal p ,.openCard p{
      margin: 0.05rem 0 0;
      font-size: 0.22rem;
      color:black;
    }
    .setMeal>p:first-child ,.openCard>p:first-child{
      font-size: 0.26rem;
    }
    .setMeal>p:nth-child(2) ,.openCard>p:nth-child(2){
      font-size: 0.22rem;
    }
    .floatDiv{
      width: 100%;
      padding: 0.05rem 0 ;
      overflow: hidden;
      margin-top: 0.1rem;
    }
    .floatDiv .floatItem{
      width: 50%;
      float: left;
    }
    .floatDiv>div:first-child{
      border-right: 1px solid #ccc;
    }
    .floatDiv .floatItem p{
      margin: 0 0 0.05rem 0;
    }

    .tableDiv{
      width: 100%;
      font-size: 0.22rem;
      background-color: #EEEEEE;
      padding-bottom: 1rem;
    }
    .tableItem{
      padding-top: 0.2rem;
    }
    .mealName{
      display: inline-block;
      width: 100%;
      height: 0.5rem;
      line-height: 0.5rem;
      background-color: white;
      color:#ED7D31;
      padding-left: 0.2rem;
    }
    .triangle{
      display: inline-block;
      border-bottom: 0.5rem solid transparent;
      border-left: 0.5rem solid transparent;
      border-right: 0.5rem solid #EEEEEE;
      position: absolute;
      top:-1px;
      left: 2rem;
    }
    .titleData{
      width: 3.4rem;
      height: 0.5rem;
      line-height: 0.5rem;
      position: absolute;
      top:-1px;
      left: 3rem;
      background-color: #EEEEEE;
      text-align: right;
    }
    .titleData span{
      display: inline-block;
      margin-right: 0.1rem;
    }
    .mealDetail{
      width: 100%;
      background-color: #F7F7F7;
      padding-top: 0.2rem;
      margin-top: 0.05rem
    }
    .mealDetail .name{
      width: 70%;
      margin: 0 auto;
      background-color: white;
      color:#ED7D31;
      text-align: center;
      padding: 0.05rem 0;
      border-radius: 0.3rem;

    }

  </style>
</head>

<body>
<div id="app" class="mui-content">
  <div style="position: fixed;top:0;width: 100%;z-index: 9999">
    <p class="actName">{{originalData.actName}}</p>
    <div class="storeChoose" >
      <div style="width: 100%;margin:0 17% ;overflow: hidden;">
        <span @click="choose(1)" :class="{default:chooseType ===1}" >活动详情</span>
        <span @click="choose(2)" :class="{default:chooseType ===2}" style="border:1px solid #ccc" >活动报告</span>
      </div>
    </div>
  </div>
  <div style="padding-top: 1.8rem">
    <!--活动详情数据-->
    <div v-show="chooseType ===1">
      <!--活动详情-->
      <div class="actDetailsBox">
        <div>
          <p>{{actType === 1 ? '会员卡.超值首充活动' : actType === 2 ? '会员卡.优惠充值活动' : actType === 3 ? '会员卡.免费福利活动' : actType === 4 ? '会员卡.免费专用特权卡活动' : ''}}</p>
        </div>
        <div>
          <p>赠送币：&nbsp;&nbsp;&nbsp;{{ isShow(originalData.coinNum,'枚') }}</p>
        </div>
        <div>
          <p>活动周期：{{originalData.actCycle}}</p>
          <p style="float: left">赠送时间：{{originalData.giveTime}}</p>
          <p style="float: right;margin-right: 0.1rem">{{originalData.executedDay}}</p>
        </div>
        <div>
          <p>活动限额：{{ originalData.limitTotalTimes === -1 ? '无限制' :  originalData.limitTotalTimes+'张' }}</p>
        </div>
        <div >
          <p>卡有效期：{{originalData.cardCycle}}</p>
        </div>

      </div>
      <!--活动详情-->
      <div class="table-box" >
        <table style="width: 100%;">
          <tr class="tab-head ">
            <td style="width:33%">支持设备</td>
            <td style="width:34%"></td>
            <td style="width:33%" class="light">数量</td>
          </tr>
          <tr v-show="originalData.cardDevices.length !==0" v-for="(item,index) in originalData.cardDevices " :class="{bglight:index%2===1}">
            <td style="width:33%;position: relative">
              <img v-show="item.deviceType ===1" style="width: 0.2rem; position:absolute;top:0.28rem; " src="../images/liping.png" alt="">
              <img v-show="item.deviceType ===2" style="width: 0.25rem;position:absolute;top:0.27rem;" src="../images/game1.png" alt="">
              <img v-show="item.deviceType ===3" style="width: 0.28rem;position:absolute;top:0.25rem;" src="../images/caipiao.png" alt="">
              <span style="display: inline-block;width: 80%;text-align: center"> {{item.deviceName}} </span>

            </td>
            <td style="width:34%"></td>
            <td style="width:33%" class="light">{{item.deviceNum}}</td>
          </tr>

        </table>
        <p v-show="originalData.cardDevices.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
          暂无数据
        </p>
      </div>
    </div>
    <!--活动销售报告-->
    <div v-show="chooseType ===2">


      <div v-show="Number(actState) !==1">
        <!---->
        <div class="dataHeader" >
          <div class="setMeal" style="padding-bottom: 0.3rem">
            <p> <strong>赠送情况</strong> </p>

            <div class="floatDiv">
              <div class="floatItem" style="width: 50%" >
                <p>获赠人数</p>
                <p>{{isShow(actDateil.peopleNum,'人') }}</p>
              </div>
              <div class="floatItem" style="width: 50%;" >
                <p>获赠次数</p>
                <p>{{isShow(actDateil.hzNum,'次') }}</p>
              </div>

            </div>
          </div>
          <div class="openCard" style="padding-bottom: 0.3rem">
            <p> <strong>消耗情况</strong></p>

            <div class="floatDiv">
              <div class="floatItem">
                <p>赠送币数</p>
                <p>{{isShow(actDateil.coinNum,'枚') }}</p>
              </div>
              <div class="floatItem">
                <p>消耗币数</p>
                <p>{{isShow(actDateil.xhCoinNum,'枚') }}</p>
              </div>
            </div>
          </div>
        </div>
        <!---->
        <div style="width: 100%;background-color: white;margin-top: 0.1rem">

          <div >
            <div class="table-box" style="padding-bottom: 1rem">
              <table style="width: 100%">
                <tr class="tab-head ">
                  <td style="width:20%">日期</td>
                  <td style="width:20%" >赠送人数</td>
                  <td style="width:20%" >赠送币数</td>
                  <td style="width:20%" >使用人数</td>
                  <td style="width:20%" >消耗币数</td>
                </tr>
                <tr v-for="(item,index) in actDateil.days" :key="index"  :class="{bglight:index%2===1}" >
                  <td style="width:20%">{{(item.date+'').replace(/^(\d{4})(\d{2})(\d{2})$/, '$2'+'月'+'$3'+'日')}}</td>
                  <td style="width:20%" >{{isShow(item.peopleNum,'人')}}</td>
                  <td style="width:20%" >{{isShow(item.coinNum,'枚')}}</td>
                  <td style="width:20%" >{{isShow(item.usePeopleNum,'人')}}</td>
                  <td style="width:20%" >{{isShow(item.xhCoinNum,'枚')}}</td>
                </tr>
              </table>
              <p v-show="actDateil.days.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
                暂无数据
              </p>
            </div>
          </div>

        </div>
      </div>
      <div v-show="Number(actState) ===1">
        <p style="width: 100%;font-size: 0.26rem;text-align: center;height: 2rem;line-height: 2rem">活动尚未开始</p>
      </div>

    </div>
  </div>

</div>
<script src="../js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../common/timeCheck.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../config.js"></script>
<script type="text/javascript">
  mui.init()
  var vm = new Vue({
    el: '#app',
    data: function() {
      return{
        storeName:'',
        storeId:'',
        fromDate:'',
        toDate:'',
        dateType:'',
        actnum:'',
        actType:'',
        actId:'',
        actState:'',
        currentShopObj:'',
        chooseType:1,   //1.活动详情 2.活动报告
        originalData:{
          "actTypeName":"会员卡.免费专用特权卡活动",
          "actName":"专用卡测试",
          "coinNum":200,
          "actCycle":"2019-01-29 09:57:16至2019-03-01 00:00:00",
          "giveTime":"每天",
          "executedDay":"已经执行:17天",
          "limitTotalTimes":-1,
          "cardCycle":"2019-01-29 00:00:00至2019-04-01 00:00:00",
          "startTime":1548727036000,
          "endTime":1551369600000,
          "cardStartTime":1548691200000,
          "cardEndTime":1554048000000,
          "cardDevices":[
            {
              "actId":1,
              "deviceId":2113,
              "deviceType":2,
              "deviceName":"工程家族",
              "deviceNum":5
            },
            {
              "actId":1,
              "deviceId":177,
              "deviceType":3,
              "deviceName":"篮球机",
              "deviceNum":14
            },
            {
              "actId":1,
              "deviceId":176,
              "deviceType":3,
              "deviceName":"篮球机",
              "deviceNum":14
            }
          ]
        },  //活动详情数据
        actDateil:{
          days:[]
        },     //活动报告数据

      }
    },

    mounted: function() {
      var vm = this;
      mui.plusReady(function() {
        vm.receiveParams();
      });
    },
    methods: {
      receiveParams: function() {
        var sf = plus.webview.currentWebview();
        this.currentShopObj = sf.currentShopObj;
        this.storeId = sf.storeId;
        this.storeName = sf.storeName;
        this.fromDate = sf.fromDate;
        this.toDate = sf.toDate;
        this.dateType = sf.dateType;
        this.actnum = sf.actnum;
        this.actType = sf.actType;
        this.actId = sf.actId;
        this.actState = sf.actState;
        vm.getActDetail();
      },
      choose:function(type){
        if(type !== this.chooseType){
          this.chooseType=type;
        }
      },

      //获取活动详情
      getActDetail:function(){
        var vm=this;
        config.ajax({
          url:'/act/getPrivilegeCardAct',
          data:{
            "storeId":vm.storeId,
            "actId":vm.actId,
          },
          success: function(res){
            console.log(JSON.stringify(res))
            if(res.result===1){
              vm.originalData=res.privilegeCardAct;
              vm.getActReport()
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },

      //获取活动报告
      getActReport:function(){
        var  vm=this
        config.ajax({
          url:'/act/getFreeActReport',
          data:{
            "storeId":vm.storeId,
            "actId":vm.actId,
            "actStartTime":vm.originalData.startTime,
            "cardEndTime":vm.originalData.cardEndTime
          },
          success: function(res){
            console.log(JSON.stringify(res))
            if(res.result===1){
              vm.actDateil=res.freeActReport
            }else{
              mui.toast(res.errormsg)
            }
          },
          error:function(res){
            mui.toast(res.errormsg)
          }
        })
      },
//      判断是否是‘--’  params 数据  company  单位
      isShow:function(params,company){
          return params !=='--' ? params+company : '--'
      }

    },
    watch: {

    }
  });
</script>
</body>

</html>